<template>
  <div ref="testTrendResultReports" style="height: 550px"></div>
</template>
<script>
import echarts from "echarts";
import { on } from "@/libs/tools";
import { getTestTrendResult } from "@/api/HttpAutoTestService/test-trend-result";
export default {
  name: "test-trend-result-reports",
  props: {
    project: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    project(val) {
      if (val) {
        let data = { project: val.id };
        getTestTrendResult(data).then((res) => {
          let testTrendResult = res.data;
          this.drawChart(testTrendResult);
        });
      }
    },
  },
  data() {
    return {
      testTrendResultReports: null,
      xAxis: { data: [] },
      yAxis: {
        max: 45,
        interval: 15,
      },
      seriesData: {
        pass_testcase_count: 0,
        fail_testcase_count: 0,
        total_testcase_count: 0,
        total_api_count: 0,
        covered_api_count: 0,
      },
    };
  },
  methods: {
    drawChart(testTrendResult) {
      this.xAxis.data = testTrendResult.map((item) => {
        return item.execute_date;
      });

      this.seriesData.pass_testcase_count = testTrendResult.map((item) => {
        return item.pass_testcase_count;
      });
      this.seriesData.fail_testcase_count = testTrendResult.map((item) => {
        return item.fail_testcase_count;
      });
      this.seriesData.total_testcase_count = testTrendResult.map((item) => {
        return item.total_testcase_count;
      });
      this.seriesData.total_api_count = testTrendResult.map((item) => {
        return item.total_api_count;
      });
      this.seriesData.covered_api_count = testTrendResult.map((item) => {
        return item.covered_api_count;
      });

      this.yAxis.max = Math.max(
        this.yAxis.interval *
          Math.ceil(
            Math.max(
              Math.max(...this.seriesData.total_api_count),
              Math.max(...this.seriesData.total_testcase_count)
            ) / this.yAxis.interval
          ),
        45
      );

      this.$nextTick(() => {
        let option = {
          title: { text: "过去7日趋势图" },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: [
              "接口总数",
              "覆盖接口总数",
              "用例总数",
              "成功用例总数",
              "失败用例总数",
            ],
          },
          xAxis: [
            {
              type: "category",
              data: this.xAxis.data,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "数量",
              min: 0,
              max: this.yAxis.max,
              interval: this.yAxis.interval,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "总数",
              min: 0,
              max: this.yAxis.max,
              interval: this.yAxis.interval,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              name: "接口总数",
              type: "line",
              data: this.seriesData.total_api_count,
              itemStyle: { color: "#2db7f5" },
            },
            {
              name: "覆盖接口总数",
              type: "line",
              data: this.seriesData.covered_api_count,
              itemStyle: { color: "#19be6b" },
            },
            {
              name: "用例总数",
              type: "line",
              data: this.seriesData.total_testcase_count,
              itemStyle: { color: "#ff9900" },
            },
            {
              name: "成功用例总数",
              type: "line",
              data: this.seriesData.pass_testcase_count,
              itemStyle: { color: "#2d8cf0" },
            },
            {
              name: "失败用例总数",
              type: "line",
              data: this.seriesData.fail_testcase_count,
              itemStyle: { color: "#ed4014" },
            },
          ],
        };
        this.testTrendResultReports = echarts.init(
          this.$refs.testTrendResultReports,
          "light"
        );
        this.testTrendResultReports.setOption(option);
        on(window, "resize", this.resize);
      });
    },
  },
};
</script>
<style scoped>
</style>